<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加学生</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .layui-form{
            margin-top: 10px;
        }
        .layui-textarea{
            width: 60%
        }
    </style>
</head>

<body>
    <!-- 面包屑 -->
    <span class="layui-breadcrumb">
        <a href="">学生管理</a>
        <a><cite>添加学生</cite></a>
    </span>
    <form class="layui-form">
        <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-inline">
                <input id="studentNo" name="studentNo" lay-verify="required" type="text" placeholder="请输入学号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input id="loginPwd" name="loginPwd" lay-verify="required" type="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input id="studentName" name="studentName" lay-verify="required" type="text" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="M" title="男" checked>
                <input type="radio" name="sex" value="F" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择年级</label>
            <div class="layui-input-inline">
                <select id="gradeId" name="gradeId" lay-filter="aihao" lay-verify="required">
                    
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input id="bornDate" name="bornDate" lay-verify="required|date" type="text" placeholder="请输入生日" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input id="phone" name="phone" lay-verify="required|phone" type="text" placeholder="请输入电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <textarea id="address" name="address" placeholder="请输入地址" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input id="email" name="email" lay-verify="required|email" type="text" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-inline">
                <input id="identityCard" name="identityCard" lay-verify="required|identity" type="text" placeholder="请输入身份证" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!-- 生成年级下拉框的模板 -->
    <script id="temp" type="text/html">
        {{# layui.each(d.list,function(index,item){ }}
        <option value="{{item.GradeId}}">{{item.GradeName}}</option>
        {{# }) }}
    </script>
    <script src="../../layui/layui.js"></script>
    <script>
        layui.use(['form','element','laydate','jquery','laytpl','layer'], function () {
            var element = layui.element;    //基础模块
            var form = layui.form;          //表单模块
            var laydate = layui.laydate;     //日期模块
            var $ = layui.jquery;            //引入jquery模块
            var laytpl = layui.laytpl;      //引入模板引擎模块
            var layer = layui.layer;        //引入弹出层模块

            //执行一个laydate实例
            laydate.render({
                elem: '#bornDate' 
            });

            //获取全部年级信息
            $.get('http://www.bingjs.com:81/Grade/GetAll',res=>{
                res.unshift({GradeId:'',GradeName:'请选择年级'})
                laytpl($('#temp').html()).render({ list: res }, function (html) {
                    $('#gradeId').html(html)
                })
                //在表单中渲染下拉框
                form.render('select');
            })

            //监听表单的提交时间
            form.on('submit(*)', function(data){
                let obj = data.field //当前容器的全部表单字段，名值对形式：{name: value}
                //检查学号是否重复
                $.get('http://www.bingjs.com:81/Student/GetStudentByNo',{
                    studentNo:obj.studentNo
                },res=>{
                    if(res===null){
                        //执行添加
                        $.post('http://www.bingjs.com:81/Student/Add',obj,
                        res=>{
                            if(res){
                                layer.open({
                                    title: '系统提示',
                                    content: '添加成功',
                                    //确定按钮的回调
                                    yes: function(index, layero){
                                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                                        //添加成功后，清空页面
                                        $('#reset').click()
                                    }
                                });     
                            }
                        })
                    }else{
                        layer.open({
                            title: '系统提示',
                            content: '学号重复！',
                            yes: function(index, layero){
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                                $('#studentNo').focus()   //学号文本框获得焦点
                            }
                        });     
                    }
                })

                
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
</body>

</html>